<template>
  <view class="search_list_main">
    <view class="search">
      <div style="display: flex; justify-content: center; padding: 20px;">
        <div style="display: flex; align-items: center;background: #f6f7f8;border: 1px solid #f7f8f9;border-radius: 6px;">
      <span style="padding: 10px; color: skyblue;">
<!--        <el-icon><Search /></el-icon>-->
        <font-awesome-icon icon="fa-solid fa-magnifying-glass" />
      </span>
          <input v-model="searchName" type="text" placeholder="输入关键词" style="border: none; margin-left: 10px; margin-right: 10px;background: none;width: 400px"/>
          <div style="display: inline-block;">
            <el-button type="primary" style="padding: 8px 30px;" @click="this.fetchVideoData">
              搜索
            </el-button>
          </div>
        </div>
      </div>
      <!--  搜索框-->
    </view>
    <view class="filter">
      <view class="filter-items">
        <view class="top_filter">
          <div class="search-condition-row">
            <button class="vui_button " :class="{ 'active': tabIndex_mode === 0 }" @click="changeTab(0,1)">综合排序</button>
            <button class="vui_button " :class="{ 'active': tabIndex_mode === 1 }" @click="changeTab(1,1)">最多播放</button>
            <button class="vui_button " :class="{ 'active': tabIndex_mode === 2 }" @click="changeTab(2,1)">最新发布</button>
            <button class="vui_button " :class="{ 'active': tabIndex_mode === 3 }" @click="changeTab(3,1)">最多评论</button>
            <button class="vui_button " :class="{ 'active': tabIndex_mode === 4 }" @click="changeTab(4,1)">最多收藏</button>
          </div>
        </view>
        <view class="top_filter_btn">
          <button class="vui_button_filter" @click="change_mode_filter()" >
            更多筛选<view v-if="this.mode_filter">
            <font-awesome-icon icon="fa-solid fa-caret-up" style="margin-left: 5px;"/>
          </view>
            <view v-else>
              <font-awesome-icon icon="fa-solid fa-caret-down" style="margin-left: 5px;" />
            </view>
          </button>


        </view>
      </view>
      <view v-if="this.mode_filter" class="filter-items">
        <view class="all_filter">
          <div class="search-condition-row">
            <button class="vui_button " :class="{ 'active': tabIndex_length === 0 }" @click="changeTab(0,2)">全部时长</button>
            <button class="vui_button " :class="{ 'active': tabIndex_length === 1 }" @click="changeTab(1,2)">10分钟以下</button>
            <button class="vui_button " :class="{ 'active': tabIndex_length === 2 }" @click="changeTab(2,2)">10-30分钟</button>
            <button class="vui_button " :class="{ 'active': tabIndex_length === 3 }" @click="changeTab(3,2)">30-60分钟</button>
            <button class="vui_button " :class="{ 'active': tabIndex_length === 4 }" @click="changeTab(4,2)">60分钟以上</button>
          </div>
          <!-- Additional condition rows can be added here as needed -->
        </view>
      </view >
      <view v-if="this.mode_filter" class="filter-items">
        <view class="all_filter">
          <div class="search-condition-row">
            <view v-for="(typeName, index) in tabIndex_type_name" :key="index">
              <button class="vui_button" :class="{ 'active': tabIndex_type === index }" @click="changeTab(index,3)">{{ typeName }}</button>
            </view>
          </div>
        </view>
      </view>
    </view>
    <view class="filter_video">
      <view v-for="(movie, index) in movieData_filter" :key="index" class="video-card-items">
        <W_Main_cen_video_card :toMID="movie['MID']" style="width: 90%;display: flex;"/>
      </view>
    </view>
    <view class="filter_pages">
      <el-pagination background layout="prev, pager, next" :page-count="max_pages" default-page-size='1' @current-change="movieData_filter_methods"/>
    </view>
  </view>
</template>

<script>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import W_Main_cen_video_card from "@/card/W_Main_cen_video_card.vue";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";

export default {
  components: {W_Main_cen_video_card},
  props: ['search_name','type','year'],
  created() {
    let search_name='';
    let type='';
    let year='';
  },
  mounted() {
    this.fetchVideoData();
  },
  data() {
    return {
      // isShowSearchBox: false,
      mode_filter:false,
      tabIndex_mode: 0,
      tabIndex_length: 0,
      tabIndex_type: 0,
      searchName:'',
      tabIndex_type_name:['全部分区','动画','冒险','喜剧','家庭','剧情','奇幻','科幻','爱情','悬疑'],
      router:useRouter(),
      movieData:ref([]),
      movieData_filter:ref([]),
      max_pages:ref(2),
      now_pages: ref(1),
      items_per_page: 9,
    };
  },
  computed: {

  },
  methods: {
    movieData_filter_methods(now_pages) {
      console.log(now_pages)
      this.now_pages = now_pages;
      const start = (this.now_pages - 1) * this.items_per_page;
      const end = start + this.items_per_page;
      this.movieData_filter=this.movieData.value.slice(start, end);
      console.log(this.movieData_filter)
      // this.$forceUpdate();
    },
    changeTab(index, mode) {
      if (mode === 1) {
        if (this.tabIndex_mode === index) {
          this.tabIndex_mode = -1
        } else {
          this.tabIndex_mode = index;
        }
        console.log(this.tabIndex_mode)
      }
      if (mode === 2) {
        if (this.tabIndex_length === index) {
          this.tabIndex_length = -1
        } else {
          this.tabIndex_length = index;
        }
        console.log(this.tabIndex_length)
      }
      if (mode === 3) {
        if (this.tabIndex_type === index) {
          this.tabIndex_type = -1
        } else {
          this.tabIndex_type = index;
        }
        console.log(this.tabIndex_type)
      }
      this.fetchVideoData();
    },
    change_mode_filter() {
      this.mode_filter = !this.mode_filter
    },
    async fetchVideoData() {
      let loading = this.openFullScreen();
      try {
        const search_type_name =this.tabIndex_type!==0?this.tabIndex_type_name[this.tabIndex_type]:'0'
        const response = await fetch(`https://movie.cpb2013.top/search.php?mode=search&sort=${this.tabIndex_mode}&len=${this.tabIndex_length}&type=${search_type_name}&name=${this.searchName}`);
        const responseData = await response.json();
        // console.log(responseData);
        if (responseData.status === 'ok') {
          this.movieData.value = responseData.data; // 将"data"直接赋值给"movieData"
          this.movieData_filter_methods(1);
          this.max_pages = Math.ceil(this.movieData.value.length / this.items_per_page);
          // Vue.set(this.movieData, 'value', responseData.data);
          // 手动触发重新渲染
          // this.$forceUpdate();
          console.log(this.max_pages);
          console.log(this.movieData.value);
        } else {
          console.error('Error fetching movie data:', responseData.message);
        }
      } catch (error) {
        console.error('Error fetching movie data:', error);
      }
      finally {
        this.closeFullScreen(loading);
      }
    },
    async fetchVideoData_type(search_type_name) {
      let loading = this.openFullScreen();
      try {
        // const search_type_name =this.tabIndex_type!==0?this.tabIndex_type_name[this.tabIndex_type]:'0'
        const response = await fetch(`https://movie.cpb2013.top/search.php?mode=search&sort=${this.tabIndex_mode}&len=${this.tabIndex_length}&type=${search_type_name}&name=${this.searchName}`);
        const responseData = await response.json();
        // console.log(responseData);
        if (responseData.status === 'ok') {
          this.movieData.value = responseData.data; // 将"data"直接赋值给"movieData"
          // Vue.set(this.movieData, 'value', responseData.data);
          // 手动触发重新渲染
          this.$forceUpdate();
          console.log(this.movieData);
        } else {
          console.error('Error fetching movie data:', responseData.message);
        }
      } catch (error) {
        console.error('Error fetching movie data:', error);
      }
      finally {
        this.closeFullScreen(loading);
      }
    },
    async fetchVideoData_year(year) {
      let loading = this.openFullScreen();
      try {
        const response = await fetch(`https://movie.cpb2013.top/recommend.php?mode=year&year=${year}`);
        const responseData = await response.json();
        // console.log(responseData);
        if (responseData.status === 'ok') {
          this.movieData.value = responseData.data; // 将"data"直接赋值给"movieData"
          // Vue.set(this.movieData, 'value', responseData.data);
          // 手动触发重新渲染
          this.$forceUpdate();
          console.log(this.movieData);
        } else {
          console.error('Error fetching movie data:', responseData.message);
        }
      } catch (error) {
        console.error('Error fetching movie data:', error);
      }
      finally {
        this.closeFullScreen(loading);
      }
    },
    openFullScreen()
    {
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      return loading;
    },
    closeFullScreen(loading){
      loading.close();
    },
  },
}
</script>

<style scoped>
.search_list_main
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  height: 100%;
  max-height: 100%;
  background-color: white;
}
.search
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}
.filter
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  width: 80%;
  justify-content: center;
}
.filter_video
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 80%;
  justify-content: flex-start;
}
.video-card-items
{
  padding: 10px 5px 50px 5px;
}
.filter-items
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  padding: 10px 0 10px 0;
  //justify-content: center;
}
.top_filter
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 90%;
}
.all_filter
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
}
.top_filter_btn
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 10%;
  justify-content: right;
}
.video-platform-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.i_wrapper {
  display: inline-block;
}

.conditions-order {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-condition-row {
  display: flex;
}

.vui_button {
  padding: 6px 10px;
  margin-right: 10px;
  //border: 1px solid transparent;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  //line-height: 20px;
  background-color: #ffffff;
  outline: none;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.vui_button.active
{
  background-color: #ddf4fb;
  color: #43b6eb;
}
.vui_button:hover {
  //border-color: #a1a8ae;
  color: #9adbf4;
  //background-color: skyblue;
}

.vui_button_filter {
  padding: 6px 10px;
  margin-right: 10px;
  border: 1px solid #e4e6e8;
  //border-color: ;
  //border: none;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  background-color: #ffffff;
  outline: none;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.vui_button_filter.active
{
  background-color: #ddf4fb;
  //color: #43b6eb;
}
.vui_button_filter:hover {
  border: 1px solid #e1e3e5;
  //border: none;
  //color: #9adbf4;
  background-color: #e1e3e5;

}

.vui_button--active-shrink {
  padding: 5px;
}

.i_icon_more {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: 5px;
}

.ts_all_fast {
  transition: all 0.2s;
}

.rotate_90 {
  transform: rotate(90deg);
}

.more-conditions {
  margin-top: 10px;
  padding: 10px;
  border-radius: 4px;
}
.web-top
{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.55); /* 半透明白色背景 */
  backdrop-filter: blur(5px); /* 模糊效果，用于提高半透明度的视觉效果 */
}
.filter_pages
{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-items: center;
  justify-content: space-around;
  flex-direction: row;
}
/* You can add more styles to match the exact design from the screenshot */
</style>